<!DOCTYPE html>
<html>
<head lang="zh-cmn-Hans">
    <meta charset="UTF-8">
    <title>机器列表</title>
    <link rel="stylesheet" type="text/css" href="../css/default.css">
    <link rel="stylesheet" type="text/css" href="../js/jquery-easyui-1.3.5/themes/gray/easyui.css">
    <link rel="stylesheet" type="text/css" href="../js/jquery-easyui-1.3.5/themes/icon.css" />
    <script type="text/javascript" src="../js/jquery-easyui-1.3.5/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="../js/jquery-easyui-1.3.5/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="../js/extends.js"></script>
    <script type="text/javascript" src="../js/common.js"></script>
    <script>

        $(function(){
            $("#tt").datagrid({
                height:$("#body").height()-$('#search_area').height()-5,
                width:$("#body").width(),
                idField:'id',
                //data: data,
                url:"datagrid.json",
                singleSelect:true,
                nowrap:true,
                fitColumns:true,
                rownumbers:true,
                showPageList:false,
                columns:[[
                    {field:'serverCode',title:'机器序列号',width:100,halign:"center", align:"left"},
                    {field:'tagIdc',title:'IDC标签',width:100,halign:"center", align:"left"},
                    {field:'tagKingdee',title:'金蝶标签',width:100,halign:"center", align:"left"},
                    {field:'ipInner',title:'内部IP',width:100,halign:"center", align:"left"},
                    {field:'ipOutter',title:'外网IP',width:100,halign:"center", align:"left"},
                    {field:'status',title:'状态',width:100,halign:"center", align:"left"},
                    {field:'department',title:'所属部门',width:100,halign:"center", align:"left"},
                    {field:'timeRack',title:'上架时间',width:100,halign:"center", align:"left"},
                    {field:'operator',title:'操作人员',width:100,halign:"center", align:"left"},
                    {field:'virtual',title:'是否虚拟机',width:100,halign:"center", align:"left"},
                    {field:'osVersion',title:'OS',width:100,halign:"center", align:"left"},
                    {field:'remark',title:'备注',width:100,halign:"center", align:"left"}
                ]],
                toolbar:'#tt_btn',
                pagination:true,
                onDblClickRow:function(rowIndex, rowData){
                    viewDetail(rowData.userId);
                }
            });

            //新增弹出框
            $("#save").on("click", function(){
                $parent("#parent_win").window({
                    width:500,
                    height:400,
                    href:'admin/add_server.html',
                    // href:'/views/server/add',
                    title:'新增机器'
                });
            });
            //修改
            $("#update").on("click", function(){
                $parent.messager.alert("提示","update", "info");
            });
            //删除
            $("#delete").on("click", function(){
                $parent.messager.alert("提示","delete", "info");
            });
        })

        function viewDetail(date, id){
            $parent.messager.alert("提示","查询详细", "info");
        }

        //监听窗口大小变化
        window.onresize = function(){
            setTimeout(domresize,300);
        };
        //改变表格宽高
        function domresize(){
            $('#tt').datagrid('resize',{
                height:$("#body").height()-$('#search_area').height()-5,
                width:$("#body").width()
            });
        }
    </script>
</head>
<body class="easyui-layout" >
<div id="body" region="center" >
    <!-- 查询条件区域 -->
    <div id="search_area" >
        <div id="conditon">
            <table border="0">
                <tr>
                    <td>用户名：</td>
                    <td ><input  name="userName" id="userName"   /></td>
                    <td>&nbsp;性别：</td>
                    <td><input  name="sex" id="sex"  /></td>
                    <td>&nbsp;部门：</td>
                    <td><input  name="department" id="department"  /></td>
                    <td>
                        <a  href="javascript:void(0)" class="easyui-linkbutton my-search-button" iconCls="icon-search" plain="true">查询</a>
                        <a  href="javascript:void(0)" class="easyui-linkbutton my-search-button" iconCls="icon-reset" plain="true" >重置</a>
                    </td>
                </tr>
            </table>
        </div>
        <!--<span id="openOrClose">111</span>-->
    </div>
    <!-- 数据表格区域 -->
    <table id="tt" style="table-layout:fixed;" ></table>
    <!-- 表格顶部工具按钮 -->
    <div id="tt_btn">
        <a href="javascript:void(0)"  id="save" class="easyui-linkbutton" iconCls="icon-add" plain="true">新增</a>
        <a href="javascript:void(0)"  id="update" class="easyui-linkbutton" iconCls="icon-edit" plain="true">修改</a>
        <a href="javascript:void(0)"  id="delete" class="easyui-linkbutton" iconCls="icon-remove" plain="true">删除</a>
    </div>
</div>
</body>
</html>